import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_module/viewModels/layer_edit_viewmodel.dart';
import 'package:flutter_module/views/fragments/style_rule_fragment.dart';
import 'package:provider/provider.dart';

class StyleSettingFragment extends StatefulWidget {
  const StyleSettingFragment({Key? key}) : super(key: key);

  @override
  State<StyleSettingFragment> createState() => _StyleSettingFragmentState();
}

class _StyleSettingFragmentState extends State<StyleSettingFragment> {
  final TextEditingController _controller = TextEditingController();

  ///路由工具
  late final NavigatorState _navi = Navigator.of(context);

  ///viewmodel
  late final LayerEditViewModel _model =
      Provider.of<LayerEditViewModel>(context, listen: false);

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  void didChangeDependencies() {
    _controller.addListener(() {
      _model.elementStyle!.maxLength = int.parse(_controller.text);
    });
    _controller.text = "${_model.elementStyle!.maxLength}";
    super.didChangeDependencies();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: BackButton(
          onPressed: () {
            _navi.pop();
          },
        ),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            TextField(
              controller: _controller,
              keyboardType: TextInputType.number,
              maxLength: 2,
              inputFormatters: [
                FilteringTextInputFormatter(RegExp("[0-9]"), allow: true),
              ],
              decoration: const InputDecoration(
                labelText: '请选择渲染文字长度: ',
                hintText: "默认14",
                labelStyle: TextStyle(color: Colors.red),
                icon: Icon(Icons.insert_drive_file),
              ),
            ),
            Card(
              child: Selector<LayerEditViewModel, int?>(
                selector: (context, model) => model.elementStyle?.rule,
                builder: (context, value, child) {
                  return ListTile(
                    title: const Text("Rule"),
                    trailing: const Icon(Icons.arrow_forward_ios),
                    subtitle: Text("${_model.elementStyle?.rule}"),
                    onTap: () {
                      _navi.push(
                        MaterialPageRoute(
                          builder: (builder) {
                            return const StyleRuleFragment();
                          },
                        ),
                      );
                    },
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}
